<template>
  <div>
    <div style="display: flex">
      <div style="">
        <el-input
          @input="search"
          prefix-icon="el-icon-search"
          v-model="page.orderId"
          placeholder="输入订单号查询"
        ></el-input>
      </div>
      <div style="">
        <el-input
          @input="search"
          prefix-icon="el-icon-search"
          v-model="page.bookName"
          placeholder="输入书名查询"
        ></el-input>
      </div>
      <div style="">
        <el-select @change="search" v-model="page.status" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table :data="orderList" border style="width: 100%">
      <el-table-column fixed prop="id" label="订单号" width="175">
      </el-table-column>
      <el-table-column prop="orderTime" label="时间" width="175">
      </el-table-column>
      <el-table-column prop="name" label="收货人" align="center" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="手机" align="center" width="180">
      </el-table-column>
      <el-table-column prop="bookName" label="书籍" align="center" width="180">
      </el-table-column>
      <el-table-column
        prop="detailedAddress"
        label="收货地址"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="amount" label="数量" align="center" width="100">
      </el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="100">
      </el-table-column>
      <el-table-column label="订单状态" width="80">
        <template slot-scope="scope">
          <span :class="'statusName' + scope.row.status">{{
            statusName(scope.row.status)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="editOrder(scope.row.id)"
            >编&nbsp;辑</el-button
          >&nbsp;&nbsp;&nbsp;
          <!-- 只有订单状态为2已完成或者3已取消才能点击删除订单 -->
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除该订单吗？"
            @confirm="deleteOrder(scope.row.id)"
          >
            <el-button
              v-show="judge(scope.row.status)"
              slot="reference"
              size="small"
              type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[4, 21, 27, 36]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 修改订单页面开始 -->
    <el-dialog
      title="修改订单状态"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 这里的订单状态我放到dialog里面开始 -->
      <el-select
        @change="changeStatus"
        v-model="order.status"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="isDisabled(order.status, item.value)"
        >
        </el-option>
      </el-select>
      <!-- 这里的订单状态我放到dialog里面结束 -->
    </el-dialog>
    <!-- 修改订单页面结束 -->
  </div>
</template>
    
<script>
import {
  getListOrder,
  getOrder,
  updateStatus,
  deleteOrder,
} from "../../api/orderMg";
export default {
  name: "OrderView",
  data() {
    return {
      statusName0: "statusName0",
      statusName1: "statusName1",
      statusName2: "statusName2",
      statusName3: "statusName3",
      dialogVisible: false,
      options1: [
        {
          value: 0,
          label: "未发货",
        },
        {
          value: 1,
          label: "已发货",
        },
        {
          value: 2,
          label: "已收货",
        },
        {
          value: 3,
          label: "取消订单",
        },
      ],
      options: [
        {
          value: 0,
          label: "未发货",
        },
        {
          value: 1,
          label: "已发货",
        },
        {
          value: 2,
          label: "已收货",
        },
        {
          value: 3,
          label: "取消订单",
        },
      ],
      order: {},
      orderList: [],
      page: {
        currentPage: 1, //当前页是第几页
        pageSize: 4, //每页最多多少条
        total: 0, //总共多少条
        bookName: "", //查询的标题或内容,
        orderId: "", //根据订单查询
        status: 0,
        userIdAdmin: "",
      },
    };
  },

  methods: {
    async deleteOrder(id) {
      //删除订单
      await deleteOrder(id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getListOrderes();
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getListOrderes();
    },
    changeStatus(status) {
      //修改状态的值触发的事件，如果成功就直接隐藏dialog,并且重新查询列表
      updateStatus(this.order.id, status).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getListOrderes();
          this.handleClose();
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getListOrderes();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getListOrderes();
    },
    getListOrderes() {
      //获取自己订单所有列
      getListOrder(localStorage.getItem("userId"), this.page).then((res) => {
        if (res.data.code == 200) {
          res.data.data.list.forEach((element) => {
            element.detailedAddress = element.detailedAddress
              .split("%/")
              .join("-");
          });
          this.orderList = res.data.data.list;
          // res.data.data.list.total这个是一共多少页
          this.page.total = res.data.data.total; //复制给list
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    judge(status) {
      //如果订单状态为0或者1就不能删除
      if (status == 0 || status == 1) {
        return false;
      }
      return true;
    },
    editOrder(orderId) {
      //点击编辑两个字，然后去后端查这个数据，
      getOrder(orderId).then((res) => {
        if (res.data.code == 200) {
          //赋值给order json对象
          this.order = res.data.data;
          //查出来这个数据就显示对dialog
          this.dialogVisible = true;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleClose() {
      //点击关闭或者空白地方就关闭dialog，然后清空order json
      this.dialogVisible = false;
      this.order = {};
    },
    statusName(status) {
      //根据状态来显示不同的文字
      let showName = "";
      switch (status) {
        case 0:
          showName = "未发货";
          break;
        case 1:
          showName = "已发货";
          break;
        case 2:
          showName = "已收货";
          break;
        case 3:
          showName = "已取消";
          break;
      }
      return showName;
    },
    isDisabled(status, value) {
      // 根据当前订单状态决定哪些选项应该被禁用
      if (status === 1) {
        // 已发货
        return value === 0 || value === 3; // 禁用未发货和已取消
      } else if (status === 0) {
        // 未发货
        return value === 1 || value === 2; // 禁用已发货和已送达
      } else if (status === 2 || status === 3) {
        // 已送达或已取消
        return true; // 所有选项都禁用
      }
      return false; // 其他情况下不禁用任何选项
    },
  },
  mounted() {
    this.getListOrderes();
  },
};
</script>

<style lang="scss" scoped>
.statusName0 {
  color: #2788f0fb;
}
.statusName1 {
  color: #a218f2fb;
}
.statusName2 {
  color: #5dde68fb;
}
.statusName3 {
  color: #f9170f;
}
</style>